<template>
  <div class="app-container">
    <div class="hor pd-b10 ver-center">
      <div>{{ this.projectInfo.province + "-" + this.projectInfo.city + "-" + this.projectInfo.name }}</div>
      <div class="pd-l-10">消防工程数据沉淀</div>
    </div>
    <div class="hor mg-b-10">
      <div class="match-width">
        <div class="flex1 pd-tb10">
          <div class="hor">
            <el-select v-model="xiTong" placeholder="请选择系统" filterable clearable @change="onClickSearch">
              <el-option
                v-for="item in xiTongList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="yeTai" placeholder="请选择型业态" filterable clearable @change="onClickSearch">
              <el-option
                v-for="item in yeTaiList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <div class="pd-l-10"></div>
            <el-button type="primary" icon="el-icon-search" @click="onClickSearch()" class="">刷新
            </el-button>
            <div class="flex1"></div>
            <el-button type="primary" slot="reference" :loading="onSaveLoading" class=" mg-l-10"
                       @click="onClickAddProjectData()">添加对比项目
            </el-button>
            <el-button type="primary" slot="reference" :loading="onSaveLoading" class=" mg-l-10"
                       @click="onClickDingBiaoData()">生成定标阶段数据沉淀
            </el-button>
                        <el-button type="primary" slot="reference" :loading="onSaveLoading" class=" mg-l-10"
                                   @click="onClickExportDb()">导出
                        </el-button>
          </div>
        </div>
        <div>
          <div class="match-width">
            <el-tabs v-model="activeNameCompany" @tab-click="handleClickCompany">
              <el-tab-pane
                v-for="(tab, index) in allList"
                :key="index"
                :label="tab.supplyCompany.name"
                :name="tab.count">
                <el-table
                  :data="tab.dataChenDian"
                  stripe
                  border
                  style="width: 100%">
                  <el-table-column label="系统" align="center" width="180">
                    <template slot-scope="scope">
                      {{ scope.row.xiTong }}
                    </template>
                  </el-table-column>
                  <el-table-column label="业态" align="center" width="180">
                    <template slot-scope="scope">
                      {{ scope.row.yeTai }}
                    </template>
                  </el-table-column>
                  <el-table-column label="本项目定标单方A（元/m2）" align="center" width="">
                    <template slot-scope="scope">
                      {{ scope.row.basePriceA }}
                    </template>
                  </el-table-column>
                  <el-table-column label="历史项目单方B（元/m2）" align="center" width="">
                    <template slot="header" scope="scope">
                      <span style="padding-right: 10px;">{{ scope.column.label }}</span>
                      <el-button type="primary" size="mini" @click="getXfgcBasic">详情</el-button>
                    </template>
                    <template slot-scope="scope">
                      {{ scope.row.historyBasePriceB }}
                    </template>
                  </el-table-column>

                  <el-table-column label="差异单方A-B（元/m2）" align="center" width="">
                    <template slot-scope="scope">
                      {{ scope.row.abPrice }}
                    </template>
                  </el-table-column>
                  <el-table-column label="差异分析" align="center" width="">
                    <template slot-scope="scope">
                      <el-input type="textarea" maxlength="1024" :autosize="{minRows: 3, maxRows: 5}"
                        v-model="scope.row.chaYiFenXi" placeholder="请输入"
                                @change="onInputChangeDb(scope.row)"/>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
    <div>
      <!--      选择历史项目-->
      <el-dialog
        title="选择要对比的项目和公司"
        :visible.sync="addProjectDialogVisible"
        width="85%"
        :before-close="handleClose">
        <div class="flex1 pd-tb10">
          <div class="hor pd-tb5">
            <div class="hor pd-l-10">
              <el-input class="" v-model="choiceProvince" placeholder="请输入省份" clearable></el-input>
            </div>
            <div class="hor pd-l-10">
              <el-input class="" v-model="choiceCity" placeholder="请输入城市" clearable></el-input>
            </div>
            <div class="pd-l-10"></div>
            <el-button type="primary" icon="el-icon-search" @click="onClickSearch()" class="">筛选
            </el-button>
            <div class="flex1"></div>
          </div>
          <div>
            <el-table
              ref="table"
              v-loading="listLoading"
              :data="contrastProjectList"
              :height="400"
              element-loading-text="Loading"
              @cell-click="onCellClick"
              @row-click="onItemClick"
              @row-dblclick="onItemDoubleClick"
              border
              fit
              highlight-current-row
            >
              <el-table-column
                fixed
                label=""
                width="55">
                <template slot-scope="scope">
                  <el-radio v-model="selectedRow" :label="scope.row" @change="handleRadioChange">&nbsp;</el-radio>
                </template>
              </el-table-column>
              <el-table-column label="地区" align="center" width="">
                <template slot-scope="scope">
                  {{ scope.row.project.province != null ? scope.row.project.province : "" }}/
                  {{ scope.row.project.city != null ? scope.row.project.city : "" }}
                </template>
              </el-table-column>
              <el-table-column label="项目名称" align="center" width="">
                <template slot-scope="scope">
                  {{ scope.row.project.name }}
                </template>
              </el-table-column>
              <el-table-column label="公司" align="center" width="">
                <template slot-scope="scope">
                  {{ scope.row.supplyCompany.name }}
                </template>
              </el-table-column>
              <el-table-column label="创建时间" width="300" align="center">
                <template slot-scope="scope">
                  {{ scope.row.biddingCompany.createTime }}
                </template>
              </el-table-column>
            </el-table>
          </div>
          <span slot="footer" class="dialog-footer  hor hor-center">
             <el-button @click="addProjectDialogVisible = false">取 消</el-button>
            <el-button type="primary" :loading="onSaveLoading"
                       @click="saveProjectData">添加</el-button>
        </span>
        </div>
      </el-dialog>
      <!--      (历史项目)详情-->
      <el-dialog
        title="历史项目详情"
        :visible.sync="historyDetailsDialog"
        :close-on-click-modal=false
        width="1280px"
        center>
        <div class="ver match-width">
          <div class="ver">
            <div class="hor mg-t-20 ver-center match-width">
              <div class="hor ver-center flex1 pd-lr10">
                <div style="width: 100px;" class="font14 font-text-color-main-title">省市：</div>
                {{ this.historyXfgcBasic.project != null ? this.historyXfgcBasic.project.province : "" }}/
                {{ this.historyXfgcBasic.project != null ? this.historyXfgcBasic.project.city : "" }}
              </div>
<!--              <div class="hor ver-center flex1 pd-lr10">-->
<!--                <div style="width: 100px;" class="font14 font-text-color-main-title ">项目名称</div>-->
<!--                <span class="flex1 font-text-color-main-title" style="width: 160px"-->
<!--                      v-model="this.historyXfgcBasic.project.name">-->
<!--                </span>-->
<!--              </div>-->
            </div>
            <!--    消防工程     -->
            <div class="ver match-width">
              <div>
                <table class="cus-table match-width" border="1px">
                  <tr>
                    <th style="width: 40px !important;" rowspan="7">通用信息</th>
                    <th style="width: 40px !important;">项目名称</th>
                    <td colspan="9">
                      {{ historyXfgcBasic.project.name }}
                    </td>
                  </tr>
                  <tr>
                    <th style="width: 40px !important;">项目业态</th>
                    <td style="width: 40px !important;">地下室</td>
                    <td style="width: 40px !important;">高层</td>
                    <td style="width: 40px !important;">小高层</td>
                    <td style="width: 40px !important;">洋房</td>
                    <td style="width: 40px !important;">别墅</td>
                    <td style="width: 40px !important;">商业</td>
                    <td style="width: 40px !important;">公寓</td>
                    <td style="width: 40px !important;">幼儿园</td>
                  </tr>
                  <tr>
                    <th style="width: 40px !important;">面积（㎡）</th>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.diXiaShi != null">
                        {{ historyXfgcBasic.diXiaShi.yeTaiArea }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gaoCeng != null">
                        {{ historyXfgcBasic.gaoCeng.yeTaiArea }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.xiaoGaoCeng != null">
                        {{ historyXfgcBasic.xiaoGaoCeng.yeTaiArea }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.yangFang != null">
                        {{ historyXfgcBasic.yangFang.yeTaiArea }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.bieShu != null">
                        {{ historyXfgcBasic.bieShu.yeTaiArea }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.shangYe != null">
                        {{ historyXfgcBasic.shangYe.yeTaiArea }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gongYu != null">
                        {{ historyXfgcBasic.gongYu.yeTaiArea }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.youErYuan != null">
                        {{ historyXfgcBasic.youErYuan.yeTaiArea }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th style="width: 40px !important;">业态占比（%）</th>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.diXiaShi != null">
                        {{ historyXfgcBasic.diXiaShi.yeTaiZb }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gaoCeng != null">
                        {{ historyXfgcBasic.gaoCeng.yeTaiZb }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.xiaoGaoCeng != null">
                        {{ historyXfgcBasic.xiaoGaoCeng.yeTaiZb }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.yangFang != null">
                        {{ historyXfgcBasic.yangFang.yeTaiZb }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.bieShu != null">
                        {{ historyXfgcBasic.bieShu.yeTaiZb }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.shangYe != null">
                        {{ historyXfgcBasic.shangYe.yeTaiZb }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gongYu != null">
                        {{ historyXfgcBasic.gongYu.yeTaiZb }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.youErYuan != null">
                        {{ historyXfgcBasic.youErYuan.yeTaiZb }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th style="width: 40px !important;">层数（层）</th>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.diXiaShi != null">
                        {{ historyXfgcBasic.diXiaShi.cengShu }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gaoCeng != null">
                        {{ historyXfgcBasic.gaoCeng.cengShu }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.xiaoGaoCeng != null">
                        {{ historyXfgcBasic.xiaoGaoCeng.cengShu }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.yangFang != null">
                        {{ historyXfgcBasic.yangFang.cengShu }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.bieShu != null">
                        {{ historyXfgcBasic.bieShu.cengShu }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.shangYe != null">
                        {{ historyXfgcBasic.shangYe.cengShu }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gongYu != null">
                        {{ historyXfgcBasic.gongYu.cengShu }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.youErYuan != null">
                        {{ historyXfgcBasic.youErYuan.cengShu }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th style="width: 40px !important;">建筑高度（米）</th>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.diXiaShi != null">
                        {{ historyXfgcBasic.diXiaShi.buildingHeight }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gaoCeng != null">
                        {{ historyXfgcBasic.gaoCeng.buildingHeight }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.xiaoGaoCeng != null">
                        {{ historyXfgcBasic.xiaoGaoCeng.buildingHeight }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.yangFang != null">
                        {{ historyXfgcBasic.yangFang.buildingHeight }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.bieShu != null">
                        {{ historyXfgcBasic.bieShu.buildingHeight }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.shangYe != null">
                        {{ historyXfgcBasic.shangYe.buildingHeight }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gongYu != null">
                        {{ historyXfgcBasic.gongYu.buildingHeight }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.youErYuan != null">
                        {{ historyXfgcBasic.youErYuan.buildingHeight }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th style="width: 40px !important;">梯户比</th>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.diXiaShi != null">
                        {{ historyXfgcBasic.diXiaShi.tiHuBi }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gaoCeng != null">
                        {{ historyXfgcBasic.gaoCeng.tiHuBi }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.xiaoGaoCeng != null">
                        {{ historyXfgcBasic.xiaoGaoCeng.tiHuBi }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.yangFang != null">
                        {{ historyXfgcBasic.yangFang.tiHuBi }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.bieShu != null">
                        {{ historyXfgcBasic.bieShu.tiHuBi }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.shangYe != null">
                        {{ historyXfgcBasic.shangYe.tiHuBi }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gongYu != null">
                        {{ historyXfgcBasic.gongYu.tiHuBi }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.youErYuan != null">
                        {{ historyXfgcBasic.youErYuan.tiHuBi }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th style="width: 40px !important;" rowspan="10">消防专用信息</th>
                  </tr>
                  <tr>
                    <th style="width: 40px !important;">楼梯间数量</th>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.diXiaShi != null">
                        {{ historyXfgcBasic.diXiaShi.ltjsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gaoCeng != null">
                        {{ historyXfgcBasic.gaoCeng.ltjsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.xiaoGaoCeng != null">
                        {{ historyXfgcBasic.xiaoGaoCeng.ltjsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.yangFang != null">
                        {{ historyXfgcBasic.yangFang.ltjsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.bieShu != null">
                        {{ historyXfgcBasic.bieShu.ltjsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.shangYe != null">
                        {{ historyXfgcBasic.shangYe.ltjsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gongYu != null">
                        {{ historyXfgcBasic.gongYu.ltjsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.youErYuan != null">
                        {{ historyXfgcBasic.youErYuan.ltjsl }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th style="width: 40px !important;">喷淋形式</th>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.diXiaShi != null">
                        {{ historyXfgcBasic.diXiaShi.plxs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gaoCeng != null">
                        {{ historyXfgcBasic.gaoCeng.plxs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.xiaoGaoCeng != null">
                        {{ historyXfgcBasic.xiaoGaoCeng.plxs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.yangFang != null">
                        {{ historyXfgcBasic.yangFang.plxs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.bieShu != null">
                        {{ historyXfgcBasic.bieShu.plxs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.shangYe != null">
                        {{ historyXfgcBasic.shangYe.plxs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gongYu != null">
                        {{ historyXfgcBasic.gongYu.plxs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.youErYuan != null">
                        {{ historyXfgcBasic.youErYuan.plxs }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th style="width: 40px !important;">地上排风形式</th>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.diXiaShi != null">
                        {{ historyXfgcBasic.diXiaShi.dspfxs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gaoCeng != null">
                        {{ historyXfgcBasic.gaoCeng.dspfxs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.xiaoGaoCeng != null">
                        {{ historyXfgcBasic.xiaoGaoCeng.dspfxs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.yangFang != null">
                        {{ historyXfgcBasic.yangFang.dspfxs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.bieShu != null">
                        {{ historyXfgcBasic.bieShu.dspfxs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.shangYe != null">
                        {{ historyXfgcBasic.shangYe.dspfxs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gongYu != null">
                        {{ historyXfgcBasic.gongYu.dspfxs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.youErYuan != null">
                        {{ historyXfgcBasic.youErYuan.dspfxs }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th style="width: 40px !important;">风井数量（趟）</th>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.diXiaShi != null">
                        {{ historyXfgcBasic.diXiaShi.fjsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gaoCeng != null">
                        {{ historyXfgcBasic.gaoCeng.fjsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.xiaoGaoCeng != null">
                        {{ historyXfgcBasic.xiaoGaoCeng.fjsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.yangFang != null">
                        {{ historyXfgcBasic.yangFang.fjsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.bieShu != null">
                        {{ historyXfgcBasic.bieShu.fjsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.shangYe != null">
                        {{ historyXfgcBasic.shangYe.fjsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gongYu != null">
                        {{ historyXfgcBasic.gongYu.fjsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.youErYuan != null">
                        {{ historyXfgcBasic.youErYuan.fjsl }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th style="width: 40px !important;">总坪消火栓管网配置形式</th>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.diXiaShi != null">
                        {{ historyXfgcBasic.diXiaShi.zpxhsgwpzxs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gaoCeng != null">
                        {{ historyXfgcBasic.gaoCeng.zpxhsgwpzxs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.xiaoGaoCeng != null">
                        {{ historyXfgcBasic.xiaoGaoCeng.zpxhsgwpzxs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.yangFang != null">
                        {{ historyXfgcBasic.yangFang.zpxhsgwpzxs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.bieShu != null">
                        {{ historyXfgcBasic.bieShu.zpxhsgwpzxs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.shangYe != null">
                        {{ historyXfgcBasic.shangYe.zpxhsgwpzxs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gongYu != null">
                        {{ historyXfgcBasic.gongYu.zpxhsgwpzxs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.youErYuan != null">
                        {{ historyXfgcBasic.youErYuan.zpxhsgwpzxs }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th style="width: 40px !important;">钢管供应方式</th>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.diXiaShi != null">
                        {{ historyXfgcBasic.diXiaShi.gggyfs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gaoCeng != null">
                        {{ historyXfgcBasic.gaoCeng.gggyfs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.xiaoGaoCeng != null">
                        {{ historyXfgcBasic.xiaoGaoCeng.gggyfs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.yangFang != null">
                        {{ historyXfgcBasic.yangFang.gggyfs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.bieShu != null">
                        {{ historyXfgcBasic.bieShu.gggyfs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.shangYe != null">
                        {{ historyXfgcBasic.shangYe.gggyfs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gongYu != null">
                        {{ historyXfgcBasic.gongYu.gggyfs }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.youErYuan != null">
                        {{ historyXfgcBasic.youErYuan.gggyfs }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th style="width: 40px !important;">电梯厅数量</th>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.diXiaShi != null">
                        {{ historyXfgcBasic.diXiaShi.dttsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gaoCeng != null">
                        {{ historyXfgcBasic.gaoCeng.dttsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.xiaoGaoCeng != null">
                        {{ historyXfgcBasic.xiaoGaoCeng.dttsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.yangFang != null">
                        {{ historyXfgcBasic.yangFang.dttsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.bieShu != null">
                        {{ historyXfgcBasic.bieShu.dttsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.shangYe != null">
                        {{ historyXfgcBasic.shangYe.dttsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gongYu != null">
                        {{ historyXfgcBasic.gongYu.dttsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.youErYuan != null">
                        {{ historyXfgcBasic.youErYuan.dttsl }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th style="width: 40px !important;">公区连廊</th>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.diXiaShi != null">
                        {{ historyXfgcBasic.diXiaShi.gqll }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gaoCeng != null">
                        {{ historyXfgcBasic.gaoCeng.gqll }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.xiaoGaoCeng != null">
                        {{ historyXfgcBasic.xiaoGaoCeng.gqll }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.yangFang != null">
                        {{ historyXfgcBasic.yangFang.gqll }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.bieShu != null">
                        {{ historyXfgcBasic.bieShu.gqll }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.shangYe != null">
                        {{ historyXfgcBasic.shangYe.gqll }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gongYu != null">
                        {{ historyXfgcBasic.gongYu.gqll }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.youErYuan != null">
                        {{ historyXfgcBasic.youErYuan.gqll }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th style="width: 40px !important;">配电房数量(个)</th>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.diXiaShi != null">
                        {{ historyXfgcBasic.diXiaShi.pdfsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gaoCeng != null">
                        {{ historyXfgcBasic.gaoCeng.pdfsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.xiaoGaoCeng != null">
                        {{ historyXfgcBasic.xiaoGaoCeng.pdfsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.yangFang != null">
                        {{ historyXfgcBasic.yangFang.pdfsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.bieShu != null">
                        {{ historyXfgcBasic.bieShu.pdfsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.shangYe != null">
                        {{ historyXfgcBasic.shangYe.pdfsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.gongYu != null">
                        {{ historyXfgcBasic.gongYu.pdfsl }}
                      </div>
                    </td>
                    <td style="width: 40px !important;">
                      <div v-if="historyXfgcBasic.youErYuan != null">
                        {{ historyXfgcBasic.youErYuan.pdfsl }}
                      </div>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {getCityData} from "@/js/cityData";

const request = require('@/api/comprehensive/xfgcStatisticalAnalysis')
const requestDb = require('@/api/comprehensive/xfgcPrecipitateDb')
const requestXfgcBasic = require('@/api/project/XfgcBasic')
export default {

  data() {
    return {
      projectInfo: {},
      allList: [],
      page: 1,
      size: 20,
      total: 0,
      autoHeight: 600,//根据屏幕高度自动计算的高度
      //筛选参数
      params: {
        flag: 1,
      },
      listLoading: false,
      onSaveLoading: false,
      areaData: [],
      addProjectDialogVisible: false,
      contrastProjectList: [],
      selectedRow: null,
      choiceProvince: null,
      choiceCity: null,
      choiceProjectId: null,
      choiceSupplyCompanyId: null,
      activeNameCompany: 1,
      xiTongList: [
        {
          value: "火灾报警系统",
          label: '火灾报警系统'
        },
        {
          value: "消防广播系统",
          label: '消防广播系统'
        },
        {
          value: "消火栓系统",
          label: '消火栓系统'
        },
        {
          value: '自动喷淋系统',
          label: '自动喷淋系统'
        },
        {
          value: '余压监控系统',
          label: '余压监控系统'
        },
        {
          value: '灭火器系统',
          label: '灭火器系统'
        },
        {
          value: '防火卷帘系统',
          label: '防火卷帘系统'
        },
        {
          value: '气体灭火系统',
          label: '气体灭火系统'
        },
        {
          value: '防火门监控系统',
          label: '防火门监控系统'
        },
        {
          value: '消防设备电源监控系统',
          label: '消防设备电源监控系统'
        },
        {
          value: '电气火灾监控系统',
          label: '电气火灾监控系统'
        },
        {
          value: '集中控制型应急照明系统',
          label: '零星其他系统'
        },
        {
          value: '零星其他系统',
          label: '零星其他系统'
        },
        {
          value: '消防检测及验收',
          label: '消防检测及验收'
        },
        {
          value: '抗震支架系统',
          label: '抗震支架系统'
        },
        {
          value: '质保期内维保',
          label: '质保期内维保'
        },
      ],
      yeTaiList: [
        {
          value: "地下室",
          label: '地下室'
        },
        {
          value: "高层",
          label: '高层'
        },
        {
          value: "小高层",
          label: '小高层'
        },
        {
          value: '洋房',
          label: '洋房'
        },
        {
          value: '别墅',
          label: '别墅'
        },
        {
          value: '商业',
          label: '商业'
        },
        {
          value: '公寓',
          label: '公寓'
        },
        {
          value: '幼儿园',
          label: '幼儿园'
        },
      ],
      xiTong: null,
      yeTai: null,
      historyDetailsDialog: false,
      historyXfgcBasic: {
        project: {},
        diXiaShi: {},
        gaoCeng: {},
        xiaoGaoCeng: {},
        yangFang: {},
        bieShu: {},
        shangYe: {},
        gongYu: {},
        youErYuan: {}
      },
      historyXfgcBasicList: [],
    }
  },
  beforeMount() {
    this.autoHeight = document.body.scrollHeight - 220
    this.projectInfo = JSON.parse(this.$route.query.projectInfo)
  },
  mounted() {
    this.areaData = getCityData()
    this.getChoiceProject()
    this.getDbData()
    //去掉第三级的信息
    for (let i = 0; i < this.areaData.length; i++) {
      if (this.areaData[i].children != null && this.areaData[i].children.length > 0) {
        for (let j = 0; j < this.areaData[i].children.length; j++) {
          this.areaData[i].children[j].children = null
        }
      }
    }
  },
  methods: {
    formatDate(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    getDbData() {
      this.listLoading = true
      const data = new FormData()
      data.append('projectId', this.projectInfo.id)
      if (!this.isEmpty(this.xiTong)) {
        data.append('xiTong', this.xiTong)
      }
      if (!this.isEmpty(this.yeTai)) {
        data.append('yeTai', this.yeTai)
      }
      const sortList = []
      sortList.push(
        {
          direction: 'asc',
          property: 'xiTong'
        }
      )
      data.append('sortJsonStr', JSON.stringify(sortList))
      requestDb.getDbList(data).then(response => {
        this.allList = response.data
        this.total = response.totalElements
        this.listLoading = false
      })
    },

    getChoiceProject() {
      this.listLoading = true
      const data = new FormData()
      data.append('projectId', this.projectInfo.id);
      if (this.choiceProvince != null) {
        data.append('province', this.choiceProvince);
      }
      if (this.choiceCity != null) {
        data.append('city', this.choiceCity);
      }
      const sortList = []
      sortList.push(
        {
          direction: 'desc',
          property: 'createTime'
        }
      )
      data.append('sortJsonStr', JSON.stringify(sortList))
      requestDb.getChoiceProject(data).then(response => {
        this.contrastProjectList = response.data
        this.total = response.totalElements
        this.listLoading = false
      })
    },

    handleClickCompany(tab, event) {
      console.log(tab, event);
    },
    handleClose() {
      this.addProjectDialogVisible = false;
      this.getChoiceProject()
    },
    onCellClick(row, column, cell, event) {
      // if (column.type == 'selection') {
      //   this.$refs.table.toggleRowSelection(row)
      // }
    },
    onClickAddProjectData() {
      this.addProjectDialogVisible = true
      this.getChoiceProject()
    },
    onItemClick(row) {//单行点击
      // 单选模式下，点击行应该切换选中状态
      this.$refs.table.toggleRowSelection(row);
    },
    handleRadioChange(row) {
      this.selectedRow = row;
    },
    onItemDoubleClick(row) {//单行双击
      this.onClickView(row)
    },
    onClickSearch() {
      this.page = 1;
      if (!this.isEmpty(this.name)) {
        this.params['province_like'] = ('%' + this.choiceProvince.trim() + '%')
      } else {
        this.params['province_like'] = ''
      }
      if (!this.isEmpty(this.modelCode)) {
        this.params['city_like'] = ('%' + this.choiceCity.trim() + '%')
      } else {
        this.params['city_like'] = ''
      }
      this.getChoiceProject()
      this.getDbData()
    },
    onClickDingBiaoData() {
      this.onSaveLoading = true
      const data = new FormData()
      data.append('projectId', this.projectInfo.id);
      if (this.choiceProjectId != null) {
        data.append('choiceProjectId', this.choiceProjectId);
      }
      if (this.choiceSupplyCompanyId != null) {
        data.append('choiceSupplyCompanyId', this.choiceSupplyCompanyId);
      }
      requestDb.generatePrecipitate(data).then(response => {
        this.onSaveLoading = false
        this.$message({
          message: '保存成功',
          type: 'success',
          duration: 2000
        })
        this.getDbData()
        this.choiceProjectId = null
        this.choiceSupplyCompanyId = null
      }).catch((e) => {
        this.onSaveLoading = false
      })
    },
    saveProjectData() {
      this.onSaveLoading = true;
      this.choiceProjectId = this.selectedRow.project.id
      this.choiceSupplyCompanyId = this.selectedRow.supplyCompany.id
      this.onClickDingBiaoData()
      this.onSaveLoading = false;
      this.addProjectDialogVisible = false
    },

    onInputChangeDb(row) {
      this.onSaveLoading = true
      //把选择的权限赋值过去
      const data = new FormData()
      data.append('json', JSON.stringify(row));
      requestDb.saveByJson(data).then(response => {
        this.onSaveLoading = false
        this.infoDialogShow = false
        this.$message({
          message: '保存成功',
          type: 'success',
          duration: 2000
        })
        this.getDbData()
      }).catch((e) => {
        this.onSaveLoading = false
      })
    },
    onClickExportDb() {
      window.open(process.env.VUE_APP_BASE_API + "/mgt/xfgcPrecipitate/exportDb?projectId=" + this.projectInfo.id)
    },
    getXfgcBasic() {
      this.listLoading = true
      const data = new FormData()
      data.append('projectId', this.projectInfo.id)
      requestXfgcBasic.getXfgcBasic(data).then(response => {
        let dataObj = response.data
        if (dataObj != null) {
          this.xfgcBasic = {
            id: dataObj.id,
            flag: dataObj.flag,
            project: dataObj.project,
            diXiaShi: dataObj.diXiaShi != null ? dataObj.diXiaShi : {},
            gaoCeng: dataObj.gaoCeng != null ? dataObj.gaoCeng : {},
            xiaoGaoCeng: dataObj.xiaoGaoCeng != null ? dataObj.xiaoGaoCeng : {},
            yangFang: dataObj.yangFang != null ? dataObj.yangFang : {},
            bieShu: dataObj.bieShu != null ? dataObj.bieShu : {},
            shangYe: dataObj.shangYe != null ? dataObj.shangYe : {},
            gongYu: dataObj.gongYu != null ? dataObj.gongYu : {},
            youErYuan: dataObj.youErYuan != null ? dataObj.youErYuan : {}
          }
        } else {
          this.xfgcBasic = {
            project: this.detail,
            diXiaShi: {},
            gaoCeng: {},
            xiaoGaoCeng: {},
            yangFang: {},
            bieShu: {},
            shangYe: {},
            gongYu: {},
            youErYuan: {}
          }
        }
        this.historyXfgcBasic = dataObj
        this.historyXfgcBasicList.push(dataObj)
        this.listLoading = false
        this.historyDetailsDialog = true
      })
    },
  }
}
</script>

<style scoped>
.cus-table {
  border-collapse: collapse;
  text-align: center;
}

.cus-table td, .cus-table th {
  border: 1px solid #cad9ea;
  color: #424242;
  height: 50px;
}

.cus-table th {
  background-color: #EFEFEF;
  width: 100px;
  color: #414141;
  font-size: 12px;
}
</style>
